<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <div style="display: flex; justify-content: center">
      <el-upload
        ref="my_upload"
        action=""
        class="upload-demo"
        drag
        :http-request="handleUpload"
        multiple
        :show-file-list="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script>
  const TYPE_NAME = {
    ble_package: 'BLE升级包',
    software_package: '软件升级包',
    backup_package: '备用升级包',
    operate_guide: '操作指南',
    instructions: '说明文件',
  }
  import { doUpload } from '@/api/device'
  export default {
    name: 'DeviceUpload',
    data() {
      return {
        title: '',
        id: '',
        type: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      showEdit(row, type) {
        this.id = row.id
        this.type = type
        this.dialogFormVisible = true
        this.title = TYPE_NAME[type]
        this.$nextTick(() => {
          this.$refs['my_upload'].clearFiles()
        })
      },
      close() {
        this.$refs['my_upload'].clearFiles()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      handleUpload(params) {
        const file = params.file
        const form = new FormData()
        // 文件对象
        console.log(file)
        form.append('file', file)
        form.append('id', this.id)
        form.append('type', this.type)
        doUpload(form).then((res) => {
          if (res.code == 0) {
            this.$baseMessage('上传成功', 'success')
            this.$emit('fetch-data')
            this.close()
          }
        })
        this.$refs['my_upload'].clearFiles()
      },
    },
  }
</script>
